<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>商家信息</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <style type="text/css">
    	.merchant{
    		background: #fff;
    		padding: 20px 10px;
    	}
    	.m_head{
    		display: flex;
    		align-items: center;
    	}
    	.m_head>div:first-child{
    		flex: 0 0 30%;
    	}
    	.m_head>div:first-child>img{
    		width: 100px;
    		height: 100px;
    	}
    	.m_head>div:nth-child(2){
    		flex: 0 0 50%;
		    padding-left: 10px;
    	}
		.m_head>div:last-child{
			flex: 0 0 20%;
		}
    	img{
    		width: 100%;
    	}
    	/*商品列表*/
		.goods{
			display: flex;
			padding: 10px;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.goods>div{
			flex: 0 0 49%;
			border-radius: 5px;
			overflow: hidden;
			margin-bottom: 10px;
			background: #fff;
		}
		.goods img{
			width: 100%;
		}
		.goods aside{
			padding: 5px 10px;
		}
		.goods h5{
			color: #333;
			width: 90%;
			line-height: 20px;
		}
		.goods p{
			color: #e53e30;
			margin-top: 10px;
		}
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">商家信息</h1>
	</header>
    
    <div class="mui-content">
		
		<div class="merchant">
			<div class="m_head">
				<div><img src="img/ftzwo.jpg" alt="" /></div>
				<div>
					<h4>这是测试商城</h4>
					<p>
						商家简介： 这里是商家简介，这里是商家简介
					</p>
				</div>
				<div>
					<a href="recommend.html"><img src="img/twoma.png" /></a>
				</div>
			</div>
			<div>
				<p>经营范围：这里是经营范围，这里是经营范围这里是经营范围这里是经营范围这里是经营范围</p>
				<p>公司地址：中国北京市东城区天安门</p>
				<p>联系电话：13703851026</p>
			</div>
		</div>
		
		<!--商品列表-->
		<article class='goods'>
			<div>
				<a href="goods_detail.html">
					<div><img src="img/1547826906a.jpg" alt="" /></div>
					<aside>
						<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜</h5>
						<p>￥585.00</p>
					</aside>
				</a>
			</div>
			<div>
				<a href="goods_detail.html">
					<div><img src="img/1547826906a.jpg" alt="" /></div>
					<aside>
						<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
						<p>￥585.00</p>
					</aside>
				</a>
			</div>
			<div>
				<a href="goods_detail.html">
					<div><img src="img/1547826906a.jpg" alt="" /></div>
					<aside>
						<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
						<p>￥585.00</p>
					</aside>
				</a>
			</div>
			<div>
				<a href="goods_detail.html">
					<div><img src="img/1547826906a.jpg" alt="" /></div>
					<aside>
						<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
						<p>￥585.00</p>
					</aside>
				</a>
			</div>
			<div>
				<a href="goods_detail.html">
					<div><img src="img/1547826906a.jpg" alt="" /></div>
					<aside>
						<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
						<p>￥585.00</p>
					</aside>
				</a>
			</div>
			<div>
				<a href="goods_detail.html">
					<div><img src="img/1547826906a.jpg" alt="" /></div>
					<aside>
						<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
						<p>￥585.00</p>
					</aside>
				</a>
			</div>
		</article>
    </div>    
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	
    </script>
</body>
</html>
